<template>
  <div style="height: 100%;display: flex;flex-direction: column">
    <el-row>
      <div class="center-form">
        <el-card class="box-card" style="width: 100%;">
        <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center">
          <span style="font-weight: bold">路由管理</span>
          <span>
             <el-button @click="()=>{getAll()}" type="primary">刷新</el-button>
            <el-button type="primary">添加一级路由</el-button>
            <el-button type="primary">添加子级路由</el-button>
          </span>
        </div>
        </el-card>

      </div>
    </el-row>
    <el-table
        :data="state.data"
        border
        ref="tableRef"
        v-loading="state.loading"
        element-loading-text="正在加载..."
        :header-cell-style="{'text-align':'center','font-weight':'bold'}"
        :cell-style="{'text-align':'center'}"
        row-key="id"
        :tree-props="{ children: 'children'}"
        style="flex: 1;">
      <template v-for="item in columns">
        <el-table-column :prop="item.prop" :label="item.label" :fixed="item.fixed" :min-width="item.minWidth" :sortable="item.sortable" :sort-method="sortMethod">
          <template #default="scope" v-if="item.render">
            <render-column :render="item.render" :scope="scope" :item="item"></render-column>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <route-add-form v-if="state.showAddForm" :is-show="state.showAddForm" :on-close="onClose" :routes="state.data" :before-submit="beforeAdd" :on-success="onSuccess" :parent="state.parent"></route-add-form>

    <guigu-loading v-if="state.loading" text="正在加载请稍后..."></guigu-loading>
  </div>
</template>

<script setup lang="jsx">
import RenderColumn from "@/components/RenderColumn/index.vue";
import {onMounted, reactive, ref} from "vue";
import GuiguIcon from "@/components/GuiguIcon/index.vue";
import {listRoutes} from "@/api/backend/route/route.js";
import RouteAddForm from "@/views/System/Route/RouteAddForm/index.vue";
import GuiguLoading from "@/components/GuiguLoading/index.vue";
import {findParentData, treeify} from "@/api/util/route.js";
//(order: 'ascending' 'descending')

const state=reactive({
    showAddForm:false,
    routeAllRequest:{},
    loading:false,
    data:[],
    parent:{}
})


const getAll=()=>{
  state.loading=true
  listRoutes().then(res=>{
    const resultList=res.data

    //找出所有的根节点
    const routes=resultList.filter(item=>item.parentId===0)
    treeify(routes,resultList)
    state.data=routes
    sortTree(state.data)
  }).finally(()=>{
    state.loading=false
  })
}


const onClose=()=>{
  state.showAddForm=false
}


const onSuccess=()=>{
  state.showAddForm=false
  location.reload()
}
const beforeAdd=()=>{

}
const sortMethod=(a,b)=>{
  return  a-b
  // if(!param.sort)return
  // sortTree(data.value,param.sort==='ascending')
}
const sortTree=(list,asc=false)=>{
  if(!list||list.length===0)return
  list.sort((a,b)=>asc?a.sort-b.sort:b.sort-a.sort)
  list.forEach(item=>{
    if(item.children){
      sortTree(item.children,asc)
    }
  })
}


//
const addRoute=(item,level)=>{
  state.showAddForm=true
  console.log("add",state.showAddForm)
  if(item.level===level){
    //如果是同级路由
    state.parent=item.parent
  }else{
    //如果添加子级路由
    state.parent=item
  }
}




const columns = [
  {
    prop: "name",
    label: "路由名称",
    minWidth:'160px',
    render(h, row, column, item){
      const name=row[item.prop]
      const iconName=row["icon"]

      return <>
        <GuiguIcon iconName={iconName}></GuiguIcon>
        <span> {name}</span>
      </>

    }
  },

  {
    prop: "title",
    label: "路由标题",
    minWidth:'160px',
  },
  {
    prop: "remark",
    label: "路由描述",
    minWidth:'160px',
  },
  {
    prop: "path",
    label: "路由路径",
    minWidth:'160px'
  },
  {
    prop: "component",
    label: "组件路径",
    minWidth:'260px',
    render(h, row, column, item){
      const componentName=row[item.prop]
      return `@/${componentName}`
    }
  },
  {
    prop: "sort",
    label: "排序",
    minWidth:'160px',
    sortable:true
  },
  {
    prop: "level",
    label: "级别",
    minWidth:'160px',
    render(h, row, column, item){
      const level=row[item.prop]
      switch (level){
        case 1: return "一级路由"
        case 2: return "二级路由"
        case 3: return "三级路由"
      }
    }
  },
  {
    prop: 'icon',
    label: "图标",
    minWidth: "160px",
    render(h, row, column, item){
      const iconName=row[item.prop]
      return  <GuiguIcon iconName={iconName}></GuiguIcon>
    }
  },
  {
    prop: 'isMenu',
    label: "是否菜单",
    minWidth: "160px",
    render(h, row, column, item){
      const isMenu=row[item.prop]
      if(isMenu===1) return "是"
      return '否'
    }
  },
  {
    prop: "operate",
    label: "操作",
    render(h, row, column, item) {
      return <ElButtonGroup>
        <ElButton size="small" type="primary" style="margin-right:5px;" onClick={()=>{addRoute(row,row.level)}}>添加同级路由</ElButton>
        <ElButton size="small" type="primary" style="margin-right:5px;" onClick={()=>{addRoute(row,row.level+1)}}>添加子级路由</ElButton>
        <ElButton size="small" type="warning" style="margin-right:5px;">编辑</ElButton>
        <ElButton size="small" type="danger" style="margin-left:5px;">删除</ElButton>
      </ElButtonGroup>

    },
    minWidth:'300px',
    fixed:'right'
  }
]
onMounted(()=>{
  getAll()
})
</script>

<style scoped>
.center-form {
  width: 100%;
  display: flex;
  justify-content: center;
}


</style>